axios({
    method: 'get',
    url: '/score/list'
}).then(function({ data: res }) {
    // console.log(res)
    if (res.code === 0) {
        //成功获取数据了
        for (let key in res.data) {
            // console.log(key)
            // console.log(res.data[key])

            let newTr = $(`<tr>
                    <th scope="row">${key}</th>
                    <td>${res.data[key].name}</td>
                    <td class="score" data-id="${key}" data-num="1">${res.data[key].score[0]}</td>
                    <td class="score" data-id="${key}" data-num="2">${res.data[key].score[1]}</td>
                    <td class="score" data-id="${key}" data-num="3">${res.data[key].score[2]}</td>
                    <td class="score" data-id="${key}" data-num="4">${res.data[key].score[3]}</td>
                    <td class="score" data-id="${key}" data-num="5">${res.data[key].score[4]}</td>
                    </tr>`);
            $('tbody').append(newTr)
        }
    }
})



//点击单元格,能够编辑数据

//思路:点击td的时候,创建input,把input放在td中

$('tbody').on('click', '.score', function() {
    //创建input,并放在td中
    // console.log(123)
    let input = $('<input/>');
    input.css({
        border: 'none',
        outline: 'none',
        textAlign: 'center',
        background: $(this).css('background')
    });
    let text = $(this).text();
    input.val(text)
    $(this).text('')
    $(this).append(input);
    input.trigger('focus');


    //失去焦点
    input.on('blur', function() {
        // 失去焦点,表示取消修改或者录入
        // 取消就把原来值放回去
        $(this).text(text)
    })


    //按回车键确认修改

    input.on('keyup', function(e) {
        if (e.key === 'Enter') {
            // console.log(input.val());
            //向接口提交数据
            axios({
                method: 'POST',
                url: '/score/entry',
                data: {

                    stu_id: $(this).parent().data('id'),

                    batch: $(this).parent().data('num'),

                    score: input.val()
                }
            }).then(function({ data: res }) {
                // console.log(res);
                toastr.success(res.message);
            })
        }
    })

})